<template>
    <div class="topic-management-container">
        <el-card class="title-card">
            <!-- 新增按钮 -->
            <el-button
                type="primary"
                @click="
                    plusTopic();
                    dialogFormVisible = true;
                "
            >
                <el-icon>
                    <Plus /> </el-icon
                >新增专题</el-button
            >
        </el-card>

        <!-- 专题列表 -->
        <el-card class="topics-table">
            <div class="topics-list">
                <el-card v-for="topic in TopicsListData" :key="topic.topicId" class="topic-card" @click="clickTopic(topic.topicId)">
                    <div class="topic-info">
                        <!-- 专题名称 -->
                        <h3>{{ topic.topicName }}</h3>
                        <!-- 专题内容描述 -->
                        <p>{{ topic.topicDescription }}</p>
                        <div class="topic-status">状态：{{ topic.status === 1 ? "已启用" : "已禁用" }}</div>
                    </div>
                </el-card>
            </div>
        </el-card>

        <!-- 新增表单 -->
        <el-dialog v-model="dialogFormVisible" title="新增专题" width="500">
            <el-form-item label="专题名称" :label-width="formLabelWidth">
                <el-input v-model="form.topicName" autocomplete="off" />
            </el-form-item>

            <el-form :model="form">
                <el-form-item label="专题内容描述" :label-width="formLabelWidth">
                    <el-input v-model="form.topicDescription" autocomplete="off" />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button
                        @click="
                            resetUpload();
                            dialogFormVisible = false;
                        "
                        >取消</el-button
                    >
                    <el-button
                        type="primary"
                        @click="
                            dialogFormVisible = false;
                            ConfirmBtn();
                        "
                        >确认</el-button
                    >
                </div>
            </template>
        </el-dialog>

        <!-- 编辑和删除表单：EditForm -->
        <el-dialog v-model="EditFormVisible" title="专题信息修改" width="500">
            <!-- 查看专题详情按钮 -->
            <template #header>
                <div class="dialog-header">
                    <span>专题</span>
                    <el-button type="primary" size="small" @click="viewArticleDetails()" style="margin-left: 10px"> 查看文章详情 </el-button>
                </div>
            </template>

            <el-form-item label="专题名称" :label-width="formLabelWidth">
                <el-input v-model="Editform.topicName" autocomplete="off" />
            </el-form-item>

            <el-form :model="form">
                <el-form-item label="专题内容描述" :label-width="formLabelWidth">
                    <el-input v-model="Editform.topicDescription" autocomplete="off" />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="EditFormVisible = false">取消</el-button>
                    <el-button
                        type="danger"
                        plain
                        @click="
                            EditFormVisible = false;
                            ForbidBtn();
                        "
                        >禁用</el-button
                    >
                    <el-button
                        type="primary"
                        @click="
                            EditConfirmBtn();
                            EditFormVisible = false;
                        "
                        >确认</el-button
                    >
                    <!-- 优化：取消多余的关闭弹窗逻辑 -->
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { getTopicsListAPI, postNewTopicAPI, putUpdateTopicAPI, putHideTopicAPI } from "@/api/community";
import { ElMessage } from "element-plus";
import { onMounted, ref, reactive } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
// 存储专题列表数据
const TopicsListData = ref([]);
// 专题列表接口
const getTopicsList = async () => {
    const res = await getTopicsListAPI();
    TopicsListData.value = res;
};

// 新增专题按钮
const plusTopic = () => {
    // 表单弹出
    console.log("点击新增按钮");
};

// 卡片专题ID-全局定义
const topicId = ref("");
// 点击卡片
const clickTopic = async (topicid) => {
    console.log("点击小卡,专题ID:", topicid);
    // 找到对应专题数据
    const topic = TopicsListData.value.find((item) => item.topicId === topicid);
    if (topic) {
        // 填充编辑表单数据
        Editform.topicName = topic.topicName;
        Editform.topicDescription = topic.topicDescription;
        // 弹窗
        EditFormVisible.value = true;
        topicId.value = topicid;
    }
};

// 新增表单-逻辑代码
const formLabelWidth = "180px"; //输入框标题宽度
const dialogFormVisible = ref(false);
// 新增表单-数据存储
const form = reactive({
    status: 1, //1表示可用，0反
    topicName: "", //专题名称
    topicDescription: "", //专题内容描述
});
// 新增表单-清除按钮-清空表单
const resetUpload = () => {
    form.topicName = "";
    form.topicDescription = "";
};

//新增表单-确认按钮
const ConfirmBtn = async () => {
    console.log("确认按钮，表单数据：", form);
    //判断是否获取数据
    // 调用新增接口
    if (form.topicName && form.topicDescription) {
        const res = await postNewTopicAPI(form);
        if (res.message === "成功") {
            ElMessage.success("新增专题成功");
            getTopicsList(); // 刷新列表
        } else {
            ElMessage.error("新增专题失败");
        }
    } else {
        ElMessage.warning("请填写表单信息");
    }
};

// 编辑表单-逻辑代码
const EditFormVisible = ref(false);
// 编辑表单-表单数据存储
const Editform = reactive({
    topicName: "", //专题名称
    topicDescription: "", //专题内容描述
});

//编辑表单-确认按钮-确认修改专题信息
const EditConfirmBtn = async () => {
    // console.log("确认按钮，ID:", topicId.value, "表单数据：", Editform)

    // 判断表单是否有数据：没有则无需修改，有才能修改
    if (Editform.topicName || Editform.topicDescription) {
        // 修改专题接口
        const res = await putUpdateTopicAPI(topicId.value, Editform);
        if (res.message === "成功") {
            ElMessage.success("修改专题信息成功");
            getTopicsList(); // 刷新列表
        } else {
            ElMessage.error("修改专题信息失败");
        }
    } else {
        ElMessage.warning("请填写需要修改的专题信息");
    }
};

// 编辑表单-禁用按钮
const ForbidBtn = async () => {
    console.log("点击禁用按钮,专题ID:", topicId.value);

    const res = await putHideTopicAPI(topicId.value);
    if (res.message === "成功") {
        ElMessage.success("禁用成功");
        getTopicsList(); // 刷新列表
    } else {
        ElMessage.error("禁用失败");
    }
};

const viewArticleDetails = () => {
    console.log("查看专题ID为", topicId.value, "的文章详情");
    // 路由跳转：打开文章详情页
    router.push(`/article/${topicId.value}`);
};

onMounted(() => {
    getTopicsList();
});
</script>

<style scoped lang="scss">
.topic-management-container {
    padding: 16px;
}

.topics-table {
    margin-top: 20px;
}

.topics-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.topic-card {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    /* 添加过渡动画 */
    cursor: pointer;
    /* 鼠标指针样式 */
}

.topic-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.topic-card:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    background-color: #f5f7fa;
}

.topic-info h3 {
    font-size: 16px;
    color: #303133;
    margin-bottom: 8px;
}

.topic-info p {
    font-size: 14px;
    color: #606266;
    line-height: 1.5;
    height: 60px;
    /* 限制描述高度 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.topic-status {
    font-size: 12px;
    color: #909399;
    margin-top: 8px;
}
</style>
